<html>
<head>
<style type="text/css">
#screen{
	width: 800px;
	height: 700px;
	border: 1px blue solid;
	float: left;
	margin-right: 40px;
}


#display{
	width: 350;
	float: left;
	
	
}

#home{
	float: right;
	
}

#home img{
	border: none;
}

</style>
<title>Google map y PHP</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

<?php

$conn = mysql_connect("127.0.0.1","root","root");
mysql_select_db("natanael");

$query = "SELECT * FROM pais ";
$result = mysql_query($query, $conn);
$lat="";
$lng="";
$place="";

$la = array();
$lo = array();
$p = array();

while($datos = mysql_fetch_array($result)){

$lat = $datos["lat"];
$lng = $datos["lng"];
$place = $datos["provincia"];

 array_push($la,$lat);
 array_push($lo,$lng);
 array_push($p,$place);
}

$y=0;
$z=0;
$v=0;
?>
var pla = 0;
var arraymarca = [];
var lat = [];
var lng = [];
var place = [];
var posicion = new google.maps.LatLng(18.456321,-69.916413);
var marca;
var map;
$(document).ready(function(){
	
	//alert("Ready...");
	
	var posicion2 = new google.maps.LatLng(18.466675,-69.80671);
	var pmarker = new google.maps.LatLng(18.466374473051985,-69.80672121047974);
	
	
	
	<?php 
	foreach($p as $x){
	?>
	place[<?php echo $v;?>] = <?php echo "'$x'";?>;
	<?php 
	$v++;
	}
	?>
	
	
	<?php 
	foreach($la as $x){
	?>
	lat[<?php echo $y;?>] = <?php echo $x;?>;
	<?php 
	$y++;
	}
	?>
	
	<?php 
	foreach($lo as $x){
	?>
	lng[<?php echo $z;?>] = <?php echo $x;?>;
	<?php 
	$z++;
	}
	?>
	

	
	
	
	//alert(lat+" , "+lng);
	
	//var posicion = new google.maps.LatLng(lat[1],lng[1]);
	
	var mapOptions = {
		zoom : 8,
		center: posicion,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var display = document.getElementById("screen");


	map = new google.maps.Map(display, mapOptions);
	
	
	
	var pro="";
	var n = 0;
	
	for(provincias in place){
	
		prov(lat[n],lng[n]);
		n++;
		
	}
	
	var s = 0;
	for(provincias in place){
		arraymarca[s].setMap(map);
		
		
		
		s++;
	}
	
	var u = 0;
	var q = 0;
	var infow;
	
	
	// begin marcas
	google.maps.event.addListener(arraymarca[0],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[0]
	});
		info0.open(map,arraymarca[0]);
		
	});
	
	
	
		google.maps.event.addListener(arraymarca[1],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[1]
	});
		info0.open(map,arraymarca[1]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[2],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[2]
	});
		info0.open(map,arraymarca[2]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[3],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[3]
	});
		info0.open(map,arraymarca[3]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[4],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[4]
	});
		info0.open(map,arraymarca[4]);
		
	});
	
	
	
		google.maps.event.addListener(arraymarca[5],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[5]
	});
		info0.open(map,arraymarca[5]);
		
	});
	
		google.maps.event.addListener(arraymarca[6],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[6]
	});
		info0.open(map,arraymarca[6]);
		
	});
	
		google.maps.event.addListener(arraymarca[7],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[7]
	});
		info0.open(map,arraymarca[7]);
		
	});
	
		google.maps.event.addListener(arraymarca[8],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[8]
	});
		info0.open(map,arraymarca[8]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[9],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[9]
	});
		info0.open(map,arraymarca[9]);
		
	});
	
		google.maps.event.addListener(arraymarca[10],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[10]
	});
		info0.open(map,arraymarca[10]);
		
	});
	
	
	google.maps.event.addListener(arraymarca[11],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[11]
	});
		info0.open(map,arraymarca[11]);
		
	});	
	
	
		google.maps.event.addListener(arraymarca[12],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[12]
	});
		info0.open(map,arraymarca[12]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[13],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[13]
	});
		info0.open(map,arraymarca[13]);
		
	});
	
	
	
		google.maps.event.addListener(arraymarca[14],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[14]
	});
		info0.open(map,arraymarca[14]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[15],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[15]
	});
		info0.open(map,arraymarca[15]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[16],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[16]
	});
		info0.open(map,arraymarca[16]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[17],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[17]
	});
		info0.open(map,arraymarca[17]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[18],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[18]
	});
		info0.open(map,arraymarca[18]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[19],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[19]
	});
		info0.open(map,arraymarca[19]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[20],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[20]
	});
		info0.open(map,arraymarca[20]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[21],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[21]
	});
		info0.open(map,arraymarca[21]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[22],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[22]
	});
		info0.open(map,arraymarca[22]);
		
	});
	
		google.maps.event.addListener(arraymarca[23],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[23]
	});
		info0.open(map,arraymarca[23]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[24],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[24]
	});
		info0.open(map,arraymarca[24]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[25],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[25]
	});
		info0.open(map,arraymarca[25]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[26],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[26]
	});
		info0.open(map,arraymarca[26]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[27],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[27]
	});
		info0.open(map,arraymarca[27]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[28],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[28]
	});
		info0.open(map,arraymarca[28]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[29],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[29]
	});
		info0.open(map,arraymarca[29]);
		
	});
	
	
		google.maps.event.addListener(arraymarca[30],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[30]
	});
		info0.open(map,arraymarca[30]);
		
	});
	
		google.maps.event.addListener(arraymarca[31],'click',function(){
		
		var info0 = new google.maps.InfoWindow({
		content: place[31]
	});
		info0.open(map,arraymarca[31]);
		
	});
	
	
	
	
	
	
	
	// fin marcas
	
	
	
	var home = "image/home.png";
	
	var circleOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: pmarker,
      radius: 15
    };
	
	var circle = new google.maps.Circle(circleOptions);
	
	var casa = new google.maps.Marker({
		position: pmarker,
		//map: map,
		title: "Calle Tirso Guerrero #6b , los Frailes II.",
		icon: home
		
	});
	
	var mensaje = new google.maps.InfoWindow({
		content: "<b>My Home</b>"
	});
	
	google.maps.event.addListener(casa,"click",function(){
		
		mensaje.open(map,casa);
		
	});
	
		google.maps.event.addListener(circle,"click",function(){
		
		//mensaje.open(map,circle);
		//alert("This is where i live.");
	});
	
	
	/*
	
	var m0 = new google.maps.Marker({
		position: new google.maps.LatLng(lat[0],lng[0]),
		map: map
	});
	
	
	var m1 = new google.maps.Marker({
		position: new google.maps.LatLng(lat[1],lng[1]),
		map: map
	});
	
	var m2 = new google.maps.Marker({
		position: new google.maps.LatLng(lat[2],lng[2]),
		map: map
	});
	
	var m3 = new google.maps.Marker({
		position: new google.maps.LatLng(lat[3],lng[3]),
		map: map
	});
	
	var m4 = new google.maps.Marker({
		position: new google.maps.LatLng(lat[4],lng[4]),
		map: map
	});

	*/
	/*
	
	var infowindow0 = new google.maps.InfoWindow({
		content: "<h4>"+place[0]+"</h4>"+"<b>LatLng:</b> "+ lat[0] + "," + lng[0]
	});
	
	infowindow0.open(map, m0);
	
	
	
	var infowindow1 = new google.maps.InfoWindow({
		content: "<h4>"+place[1]+"</h4>"+"<b>LatLng:</b> "+ lat[1] + "," + lng[1]
	});
	
	infowindow1.open(map, m1);
	
	
	var infowindow2 = new google.maps.InfoWindow({
		content: "<h4>"+place[2]+"</h4>"+"<b>LatLng:</b> "+ lat[2] + "," + lng[2]
	});
	
	infowindow2.open(map, m2);
	
	
	var infowindow3 = new google.maps.InfoWindow({
		content: "<h4>"+place[3]+"</h4>"+"<b>LatLng:</b> "+ lat[3] + "," + lng[3]
	});
	
	infowindow3.open(map, m3);
	
	
	var infowindow4 = new google.maps.InfoWindow({
		content: "<h4>"+place[4]+"</h4>"+"<b>LatLng:</b> "+ lat[4] + "," + lng[4]
	});
	
	infowindow4.open(map, m4);
	*/
	

	
	
});


function prov(ltd,lon){
	
	    marca = new google.maps.Marker({
		position: new google.maps.LatLng(ltd,lon),
		map: map
	});
	
	arraymarca.push(marca);
	
	
}

function info(marker,n){
	
	infowindow = new google.maps.InfoWindow({
		content: place[n] + "<br /><img src='image/map.jpg' width='200' height='200' />"
	});
	if(marker){
	infowindow.open(map,marker);
	}
}


function provincia(lat,lon,n){
	map.setCenter(new google.maps.LatLng(lat,lon));
	map.setZoom(13);
	
	info = new google.maps.InfoWindow({
		content: "<center><b>" + place[n] +"</b>" + "<br /><img src='image/map.jpg' width='100' height='100' /></center>"
	});
	
	info.open(map,arraymarca[n]);
}

function home(){
	map.setCenter(new google.maps.LatLng(18.456321,-69.916413));
	map.setZoom(8);
	
	provincia(0,0,0);
}

</script>
</head>
<body>
<div id="screen"></div>
<div id="display">
<table border='1' cellspacing='0' cellpadding='3'>
<tr>
<th>#</th>
<th>Provincias</th>
<th>Latitud</th>
<th>Longitud</th>
</tr>
<?php

$conn = mysql_connect("127.0.0.1","root","root");
mysql_select_db("natanael");

$query = "SELECT * FROM pais ";
$result = mysql_query($query, $conn);
$numero = 0;
$num = 1;
while($datos = mysql_fetch_array($result)){
	
  //nothing
	$pro = $datos["provincia"];
	echo "<tr>";
	echo "<td>". $num ."</td>";
	echo "<td><a href=javascript:provincia(". $datos["lat"]."," .$datos["lng"]. ",". $numero . ")>". $datos["provincia"] ."</a></td>";
	echo "<td>". $datos["lat"] ."</td>";
	echo "<td>". $datos["lng"] ."</td>";
	echo "</tr>";
	
	$numero++;
	$num++;
}
?>
</table>
</div>
<div id="home"><a href=''><img src="image/home.png" width="40" height="40"></a></div>
</body>
</html>

